<template>
    <div class="list">
        <item 
            v-for="(item, index) in arr"
            :key="index"
            :item="item"
            :index="index"
            @mouseenter.native="enterItem(index)"
        ></item>
        <!-- 在标签组件上绑定事件需要加.native,如果不加，不能绑定 -->
    </div>
</template>

<script>
import Item from './Item.vue';
    export default {
        props:["arr"],
        components:{
            Item,
        },
        methods:{
            enterItem(index){
                this.$eventBus.$emit("itemIndex",index+1);
            },
        },
    };
</script>

<style lang="scss" scoped>
    .list{
        width: 1000px;
        // border: 2px solid green;
        margin: 0 auto;
    }
</style>